<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
    </view>
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <text v-if="rescanDate">
        {{rescanDate.split('-')[1]}}月复扫记录
      </text>
    </view>
    <view class="content">
      <view class="title">当月总复扫量: {{rescanNum}}</view>
      <view class="list">
        <view class="item" v-for="(item ,index) in list" :key="index">
          <view class="item_title">车牌号:{{item.licensePlateNumber.substr(0,2) + "*****" + item.licensePlateNumber.substr(6)}}</view>
          <view class="item_title">复扫成功</view>
          <view class="item_date">{{item.createDate}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  data() {
    return {
      info: {},
      rescanNum: '',
      list: [],
      userInfo: uni.getStorageSync("Pduser"),
      rescanDate: '',
      imgList: [],
      flag: false
    }
  },
  onLoad(option) {
    this.rescanDate = option.rescanDate
    this.rescanNum = option.num
  },
  onShow() {
    this.getList()
  },
  methods: {
    fanhui() {
      uni.navigateBack({
        delta: 1
      });
    },
    getList() {
      uni.showLoading({
        title: '加载中'
      });
      this.$myRequest
        .get("/api/mobile/vehicleOwner/getRescanRecordDetail", {
          merchantId: Number(this.userInfo.merchantId),
          years :this.rescanDate,
          pageSize: 99999
        }).then(res => {
          this.list = res.getRescanRecordDetail.pageList
          uni.hideLoading()
        });
    },
  },
}
</script>
<style lang="less" scoped>

	.box {
		width: 100%;
		min-height: 100vh;
		// padding-bottom: 130rpx;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 104rpx;
			right: 30rpx;
		}

		p {
			position: absolute;
			// top: 90rpx;
			line-height: 45rpx;
			bottom: 21rpx;
			right: 30rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
	
  .content{
    padding: 30rpx;
    .title{
      padding-bottom: 15rpx;
      border-bottom: 1rpx solid #ddd;
      font-size: 34rpx;
      font-weight: 500;
      color: #64B6A8;
      line-height: 48rpx;
    }
    .list {
      .item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #ddd;
        .item_title {
          font-size: 28rpx;
          line-height: 28rpx;
          margin-bottom: 20rpx;
          color: #333;
        }
        .item_date {
          color: #999999;
          font-size: 28rpx;
          line-height: 28rpx;
        }
      }
    }
  }
	.fixed {
		// display: flex;
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100% !important;
		z-index: 40;
	}

</style>